<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>个人中心</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" />
    <link rel="stylesheet" href="../css/admin.css?v=315" />
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .user-info-head {
            width: 110px;
            height: 110px;
            position: relative;
            display: inline-block;
            border-radius: 50%;
            border: 2px solid #eee;
        }

        .user-info-head:hover:after {
            content: '\e65d';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            color: #eee;
            background: rgba(0, 0, 0, 0.5);
            font-family: layui-icon;
            font-size: 24px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            cursor: pointer;
            line-height: 110px;
            border-radius: 50%;
        }

        .user-info-head img {
            width: 110px;
            height: 110px;
            border-radius: 50%;
        }

        .info-list-item {
            position: relative;
            padding-bottom: 8px;
        }

        .info-list-item>.layui-icon {
            position: absolute;
        }

        .info-list-item>p {
            padding-left: 30px;
        }

        .dash {
            border-bottom: 1px dashed #ccc;
            margin: 15px 0;
        }

        .bd-list-item {
            padding: 14px 0;
            border-bottom: 1px solid #e8e8e8;
            position: relative;
        }

        .bd-list-item .bd-list-item-img {
            width: 48px;
            height: 48px;
            line-height: 48px;
            margin-right: 12px;
            display: inline-block;
            vertical-align: middle;
        }

        .bd-list-item .bd-list-item-content {
            display: inline-block;
            vertical-align: middle;
        }

        .bd-list-item .bd-list-item-lable {
            margin-bottom: 4px;
            color: #333;
        }

        .bd-list-item .bd-list-item-oper {
            position: absolute;
            right: 0;
            top: 50%;
            text-decoration: none !important;
            cursor: pointer;
            transform: translateY(-50%);
        }

        .user-info-form .layui-form-item {
            margin-bottom: 25px;
        }
    </style>
</head>

<body>
    <!-- 正文开始 -->
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <!-- 左 -->
            <div class="layui-col-sm12 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body" style="padding: 25px;">
                        <div class="text-center layui-text">
                            <div class="user-info-head" id="imgHead">
                                <img src="../images/head.png" />
                            </div>
                            <h2 style="padding-top: 20px;" id="username"></h2>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右 -->
            <div class="layui-col-sm12 layui-col-md9">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab layui-tab-brief" lay-filter="userInfoTab">
                            <ul class="layui-tab-title">
                                <li><h1>基本信息</h1></li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="layui-form user-info-form layui-text"
                                        style="max-width: 400px;padding-top: 25px;">
                                        <div class="ifobox">
                                            <label>学号/教工号:</label>
                                            <span id="number"></span>
                                            <br>
                                            <hr>
                                            <label>身份:</label>
                                            <span id="identity"></span>
                                            <br>
                                            <hr>
                                            <label>性别:</label>
                                            <span id="gender"></span>
                                            <br>
                                            <hr>
                                            <label>年龄:</label>
                                            <span id="age"></span>
                                            <br>
                                            <hr>
                                            <label>身份证号:</label>
                                            <span id="id_number"></span>
                                            <br>
                                            <hr>
                                            <label>专业:</label>
                                            <span id="major"></span>
                                            <br>
                                            <hr>
                                            <label>班级:</label>
                                            <span id="unit"></span>
                                            <br>
                                            <hr>
                                            <label>你的id:</label>
                                            <span id="uid"></span>
                                            <br>
                                            <hr>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    </div>

    <!-- js部分 -->
    <script type="text/javascript" src="../lib/layui-v2.6.3/layui.js"></script>
    <!--<script type="text/javascript" src="../../../static/assets/js/common.js?v=315"></script>-->
    <script type="text/javascript" src="../lib/jquery-3.4.1/jQuery.js"></script>
    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>

        var storage = window.localStorage;
        var number=storage.getItem("number");
        console.log(number);
        var obj = {
            "number":number
        }
        $.ajax({
            type: "POST",
            contentType: 'application/json',
            url: "http://110.42.199.36:8081/user/getUserMsgByNumber",
            data:JSON.stringify(obj),
            dataType: 'json',
            success: function (data) {
                console.log("成功");
                console.log(data);

                $("#username").text(data.data.name);
                $("#age").text(data.data.age);
                $("#id_number").text(data.data.id_number);
                $("#identity").text(data.data.identity);
                $("#major").text(data.data.major);
                $("#number").text(data.data.number);
                $("#uid").text(data.data.uid);
                $("#unit").text(data.data.unit);
                $("#gender").text(data.data.gender);
            }
        })

        // // 选择头像
        // $('#imgHead').click(function () {
        //     admin.cropImg({
        //         onCrop: function (res) {
        //             $('#imgHead>img').attr('src', res);
        //         }
        //     });
        // });




        // layui.use(['layer', 'admin'], function () {
        //     var $ = layui.jquery;
        //     var admin = layui.admin;
        //
        //
        // });
    </script>
</body>

</html>